<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transform-2D旋转</title>
    <style>
        /* 
        css3 2D 旋转
            rotate() 旋转 rotate() 函数通过指定的角度参数对元素根据对象原点指定一个2D旋转
                它主要在二维空间内进行操作，接收一个角度值，用来指定旋转的幅度
                如果这个值为正值，元素相对原点中心顺时针旋转
                如果这个值为负值，元素相对原点中心逆时针旋转
            语法：rotate(a)
                a 代表的是一个旋转的角度值。其取值可以是正值，也可以是负值
                    如果取正值时，元素默认之下相对元素中心点顺时针旋转
                    如果取负值时，元素默认之下相对元素中心点逆时针旋转
        */

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: #0f0;
            margin: 100px auto;
            /* 添加过渡效果 */
            transition: transform 1s ease-in-out;
        }

        div:hover {
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>